<script setup lang="ts">
import { useGuessList } from '@/composables'
import { deleteMemberOrderAPI, getMemberOrderByIdAPI, getMemberOrderConsignmentByIdAPI, getMemberOrderLogisticsByIdAPI, putMemberOrderAPI, putMemberOrderReceiptByIdAPI } from '@/services/order'
import type { LogisticItem, OrderResult } from '@/types/order'
import { OrderState, orderStateList } from '@/services/constants'
import { onShow, onReady } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { getPayMockAPI, getPayWxPayMiniPayAPI } from '@/services/pay'
import PageSkeleton from './components/PageSkeleton.vue'

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// 控制骨架屏是否加载状态
const isLoading = ref(false)

// 猜你喜欢
const { guessRef, onScrolltolower } = useGuessList()

// 弹出层组件
const popup = ref<UniHelper.UniPopupInstance>()

// 取消原因列表
const reasonList = ref([
    '商品无货',
    '不想要了',
    '商品信息填错了',
    '地址信息填写错误',
    '商品降价',
    '其它',
])

// 订单取消原因
const reason = ref('')

// 复制内容
const onCopy = (id: string) => {
    // 设置系统剪贴板的内容
    uni.setClipboardData({ data: id })
}

// 获取页面参数
const query = defineProps<{
    id: string
}>()

// 获取页面栈(用于自定义导航图标)
const pages = getCurrentPages()
// 基于小程序的 Page 类型扩展 uni-app 的 Page
type PageInstance = Page.PageInstance & WechatMiniprogram.Page.InstanceMethods<any>

// #ifdef MP-WEIXIN
// 获取当前页面实例, 数组最后一项(使用原生at方法, -1代表最后, 另外这个属性TS没优化好, 直接any类型)
const pageInstance = pages.at(-1) as PageInstance
// 页面渲染完毕, 绑定动画效果
onReady(() => {
    // 动画效果, 导航栏背景色
    pageInstance.animate('.navbar', // 选择器
        [{ backgroundColor: 'transparent' }, { backgroundColor: '#f8f8f8' }], 1000, // 关键帧信息 动画持续时长
        {
            scrollSource: '#scroller', // scroll-view的选择器
            timeRange: 1000, // 时间长度
            startScrollOffset: 0, // 开始滚动偏移量
            endScrollOffset: 50 // 结算滚动偏移量
        }
    )
    // 动画效果, 导航栏标题
    pageInstance.animate('.navbar .title',
        [{ color: 'transparent' }, { color: '#000' }], 1000,
        {
            scrollSource: '#scroller',
            timeRange: 1000,
            startScrollOffset: 0,
            endScrollOffset: 50
        }
    )
    // 动画效果, 导航栏返回按钮
    pageInstance.animate('.navbar .back',
        [{ color: '#fff' }, { color: '#000' }], 1000,
        {
            scrollSource: '#scroller',
            timeRange: 1000,
            startScrollOffset: 0,
            endScrollOffset: 50
        }
    )
})
// #endif

// 存储订单详情数据
const order = ref<OrderResult>()
// 获取订单详情数据
const getMemberOrderByIdData = async () => {
    const res = await getMemberOrderByIdAPI(query.id)
    order.value = res.result
    // 若订单状态为待发货、待评价、已完成则调用获取物流信息接口并存储数据(这里使用includes方法简化代码)
    if ([OrderState.DaiShouHuo, OrderState.DaiPingJia, OrderState.YiWanCheng].includes(order.value.orderState)) {
        getMemberOrderLogisticsByIdData()
    }
}

// 存储物流信息数据
const logisticList = ref<LogisticItem[]>([])
// 获取物流信息数据(将商品id传递给请求接口, 并存储数据)
const getMemberOrderLogisticsByIdData = async () => {
    const res = await getMemberOrderLogisticsByIdAPI(query.id)
    logisticList.value = res.result.list
}

// 组件加载时调用
onShow(async () => {
    isLoading.value = true
    await getMemberOrderByIdData()
    isLoading.value = false
})

// 订单倒计时结束事件(支付超时修改订单状态为: 已取消)
const onTimeup = () => {
    order.value!.orderState = OrderState.YiQuXiao
}

// 订单支付按钮事件(请求支付接口并调用微信支付方法)
const onOrderPay = async () => {
    if (import.meta.env.DEV || import.meta.env.PROD) {
        // 开发环境模拟支付(因没有支付接口, 测试APP与H5端有Bug, 所以这里使用开发环境与生产环境同时使用)
        await getPayMockAPI({ orderId: query.id })
    } else {
        // 正式环境微信支付
        // #ifdef MP-WEIXIN
        const res = await getPayWxPayMiniPayAPI({ orderId: query.id })
        wx.requestPayment(res.result)
        // #endif
    }
    uni.redirectTo({ url: `/pagesOrder/payment/payment?id=${query.id}` })
}

// 是否为开发环境(用于模拟发货)(这里生产环境仅测试使用, 上线项目时可改为开发环境)
const isDev = import.meta.env.DEV || import.meta.env.PROD

// 模拟发货按钮事件(仅订单状态为发货状态才可模拟发货)
const onOrderSend = async () => {
    // 判断是否为开发环境, 是则发起模拟发货请求并更新订单状态为待收货
    if (isDev) {
        await getMemberOrderConsignmentByIdAPI(query.id)
        order.value!.orderState = OrderState.DaiShouHuo
        uni.showToast({ icon: 'success', title: '发货成功' })
    }
}

// 确认收货按钮事件
const onOrderConfirm = () => {
    // 二次确认模态框
    uni.showModal({
        content: '为保障您的权益, 请收到货并确认无误后, 再确认收货',
        success: async (success) => {
            if (success.confirm) {
                // 发送确认收货接口后, 更新订单状态
                const res = await putMemberOrderReceiptByIdAPI(query.id)
                order.value = res.result
                uni.showToast({ icon: 'success', title: '确认收货成功' })
            }
        }
    })
}

// 删除订单按钮事件
const onOrderDelete = () => {
    // 二次确认(确认就请求删除订单, 并跳转订单列表页)
    uni.showModal({
        content: '是否删除订单?',
        success: async (success) => {
            if (success.confirm) {
                await deleteMemberOrderAPI({ ids: [query.id] })
                uni.redirectTo({ url: `/pagesOrder/list/list` })
            }
        },
    })
}

// 取消订单按钮事件
const onCancelChange = async () => {
    const res = await putMemberOrderAPI(query.id, { cancelReason: reason.value })
    order.value = res.result
    popup.value?.close!()
    uni.showToast({ icon: 'success', title: '订单取消成功' })
}
</script>

<template>
    <!-- 自定义导航栏: 默认透明不可见, scroll-view 滚动到 50 时展示 -->
    <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
        <view class="wrap">
            <navigator v-if="pages.length > 1" open-type="navigateBack" class="back icon-left"></navigator>
            <navigator v-else url="/pages/index/index" open-type="switchTab" class="back icon-home">
            </navigator>
            <view class="title">订单详情</view>
        </view>
    </view>
    <scroll-view scroll-y class="viewport" id="scroller" @scrolltolower="onScrolltolower">
        <template v-if="order">
            <!-- 订单状态 -->
            <view class="overview" :style="{ paddingTop: safeAreaInsets!.top + 20 + 'px' }">
                <!-- 待付款状态:展示去支付按钮和倒计时 -->
                <template v-if="order?.orderState === OrderState.DaiFuKuan">
                    <view class="status icon-clock">等待付款</view>
                    <view class="tips">
                        <text class="money">应付金额: ¥ {{ order.payMoney }}</text>
                        <text class="time">支付剩余</text>
                        <uni-countdown :second="order.countdown" @timeup="onTimeup" color="#fff" splitor-color="#fff"
                            :show-day="false" :show-colon="false" />
                    </view>
                    <view class="button" @tap="onOrderPay">去支付</view>
                </template>
                <!-- 其他订单状态:展示再次购买按钮 -->
                <template v-else>
                    <!-- 订单状态文字 -->
                    <view class="status"> {{ orderStateList[order.orderState].text }} </view>
                    <view class="button-group">
                        <navigator class="button" :url="`/pagesOrder/create/create?orderId=${query.id}`" hover-class="none">
                            再次购买
                        </navigator>
                        <!-- 待发货状态：模拟发货,开发期间使用,用于修改订单状态为已发货 -->
                        <view v-if="isDev && order.orderState == OrderState.DaiFaHuo" @tap="onOrderSend" class="button">模拟发货
                        </view>
                        <view v-if="order.orderState == OrderState.DaiShouHuo" @tap="onOrderConfirm" class="button">确认收货
                        </view>
                    </view>
                </template>
            </view>
            <!-- 配送状态 -->
            <view class="shipment">
                <!-- 订单物流信息 -->
                <view v-for="item in logisticList" :key="item.id" class="item">
                    <view class="message">{{ item.text }}</view>
                    <view class="date"> {{ item.time }} </view>
                </view>
                <!-- 用户收货地址 -->
                <view class="locate">
                    <view class="user"> {{ order.receiverContact }} {{ order.receiverMobile }} </view>
                    <view class="address"> {{ order.receiverAddress }} </view>
                </view>
            </view>

            <!-- 商品信息 -->
            <view class="goods">
                <view class="item">
                    <navigator class="navigator" v-for="item in order.skus" :key="item.id"
                        :url="`/pages/goods/goods?id=${item.spuId}`" hover-class="none">
                        <image class="cover" :src="item.image">
                        </image>
                        <view class="meta">
                            <view class="name ellipsis"> {{ item.name }} </view>
                            <view class="type"> {{ item.attrsText }} </view>
                            <view class="price">
                                <view class="actual">
                                    <text class="symbol">¥</text>
                                    <text> {{ item.curPrice }} </text>
                                </view>
                            </view>
                            <view class="quantity"> x{{ item.quantity }} </view>
                        </view>
                    </navigator>
                    <!-- 待评价状态:展示按钮 -->
                    <view class="action" v-if="order.orderState == OrderState.DaiPingJia">
                        <navigator url="/pagesOrder/list/list?type=4" class="button primary"> 申请售后 </navigator>
                        <navigator url="/pagesOrder/list/list?type=4" class="button"> 去评价 </navigator>
                    </view>
                </view>
                <!-- 合计 -->
                <view class="total">
                    <view class="row">
                        <view class="text">商品总价: </view>
                        <view class="symbol"> {{ order.totalMoney }} </view>
                    </view>
                    <view class="row">
                        <view class="text">运费: </view>
                        <view class="symbol"> {{ order.postFee }} </view>
                    </view>
                    <view class="row">
                        <view class="text">应付金额: </view>
                        <view class="symbol primary"> {{ order.payMoney }} </view>
                    </view>
                </view>
            </view>

            <!-- 订单信息 -->
            <view class="detail">
                <view class="title">订单信息</view>
                <view class="row">
                    <view class="item">
                        订单编号: {{ query.id }} <text class="copy" @tap="onCopy(query.id)">复制</text>
                    </view>
                    <view class="item">下单时间: {{ order.createTime }} </view>
                </view>
            </view>

            <!-- 猜你喜欢 -->
            <XtxGuess ref="guessRef" />

            <!-- 底部操作栏 -->
            <view class="toolbar-height" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"></view>
            <view class="toolbar" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
                <!-- 待付款状态:展示支付按钮 -->
                <template v-if="order.orderState == OrderState.DaiFuKuan">
                    <view class="button primary" @tap="onOrderPay"> 去支付 </view>
                    <view class="button" @tap="popup?.open?.()"> 取消订单 </view>
                </template>
                <!-- 其他订单状态:按需展示按钮 -->
                <template v-else>
                    <navigator class="button secondary" :url="`/pagesOrder/create/create?orderId=${query.id}`"
                        hover-class="none">
                        再次购买
                    </navigator>
                    <!-- 待收货状态: 展示确认收货 -->
                    <view class="button primary" v-if="order.orderState == OrderState.DaiShouHuo" @tap="onOrderConfirm">
                        确认收货 </view>
                    <!-- 待评价状态: 展示去评价 -->
                    <view class="button" v-if="order.orderState == OrderState.DaiPingJia">
                        <navigator class="navigator" url="/pagesOrder/list/list?type=4" hover-class="none">去评价</navigator>
                    </view>
                    <!-- 待评价/已完成/已取消 状态: 展示删除订单 -->
                    <view class="button delete" @tap="onOrderDelete" v-if="order.orderState >= OrderState.DaiPingJia"> 删除订单
                    </view>
                </template>
            </view>
        </template>
        <template v-else>
            <!-- 骨架屏组件 -->
            <PageSkeleton />
        </template>
    </scroll-view>
    <!-- 取消订单弹窗 -->
    <uni-popup ref="popup" type="bottom" background-color="#fff">
        <view class="popup-root">
            <view class="title">订单取消</view>
            <view class="description">
                <view class="tips">请选择取消订单的原因：</view>
                <view class="cell" v-for="item in reasonList" :key="item" @tap="reason = item">
                    <text class="text">{{ item }}</text>
                    <text class="icon" :class="{ checked: item === reason }"></text>
                </view>
            </view>
            <view class="footer">
                <view class="button" @tap="popup?.close?.()">取消</view>
                <view class="button primary" @tap="onCancelChange">确认</view>
            </view>
        </view>
    </uni-popup>
</template>

<style lang="scss">
/* H5端默认开启scoped样式隔离, 导致组件基础样式无效 */
@import './styles/detail.scss';
</style>